<template>
  <div class="warningStatistics">
    <el-row>
      <el-col :span="24" class="card-box">
        <el-card>
          <div class="tableBox">
            <h2>报警月份统计</h2>
            <table cellspacing="0" style="width: 100%; text-align: center;">
              <tr style="height: 40px;">
                <td>1月份</td>
                <td>2月份</td>
                <td>3月份</td>
                <td>4月份</td>
                <td>5月份</td>
                <td>6月份</td>
                <td>7月份</td>
                <td>8月份</td>
                <td>9月份</td>
                <td>10月份</td>
                <td>11月份</td>
                <td>12月份</td>
              </tr>
              <tr style="height: 50px;" border="1">
                <td v-for="item in countCollection" :key="item.key">{{ item }}</td>
              </tr>
            </table>
          </div>
        </el-card>
      </el-col>
      <el-col :span="24" class="card-box">
        <el-card>
          <!-- 为eCharts定义一个接收的dom盒子 -->
          <div id="warningStatisticsEcharts"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
//引入查询接口
import { getWarningCounts } from "@/api/meter/mdWarningStatistics";
export default {
  name: "mdWarningStatistics",
  data() {
    return {
      //将dom节点设置为空
      warningStatisticsEcharts: null,
      monthCollection: [],
      countCollection: []
    }
  },
  //vue组件挂载时触发查询方法
  mounted() {
    this.getList();
  },
  methods: {
    getList() {
      this.loading = true
      //查询接口
      getWarningCounts().then(response => {
        //查询时定义变量接收值
        let lineChart = response.data
        //定义空数组用于接收月份和数量的值
        var monthArray = []
        var countArray = []
        lineChart.forEach(item => {
          monthArray.push(item.month)
          countArray.push(item.count)
        });
        this.monthCollection = lineChart
        this.countCollection = countArray
        //dom节点挂载
        this.warningStatisticsEcharts = this.$echarts.init(document.getElementById("warningStatisticsEcharts"))
        //为eCharts图表传值
        this.warningStatisticsEcharts.setOption({
          color: ["#2EC3B9"],
            title: {
              text: '告警数量统计柱状图'
            },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              }
            },
            legend: {
              data: ['数量'],
              textStyle: {
                color: '#000'
              }
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            xAxis: [{
              type: 'category',
              data: monthArray,
              axisTick: {
                alignWithLabel: true
              },
            }],
            yAxis: [
              {
                type: 'value'
              }
            ],
            series: [
              {
                name: '报警数量',
                type: 'bar',
                barWidth: '60%',
                data: countArray
              }
            ]
        })
      })
      this.loading = false
    }
  }
}
</script>

<style scoped lang="scss">
.warningStatistics {
  #warningStatisticsEcharts {
    height: 400px;
  }

  .tableBox {
    height: 232px;
    text-align: center;

    table {
      margin-top: 30px;
      border: 1px solid #000;

      td{
        border: 1px solid #000;
      }
    }
  }
}
</style>

